<template>
    <!-- <div class="left-menu"> -->
        <el-row class="menu_page">        
            <el-col >           
                <el-menu            
                class="el-menu-vertical-demo"        
                background-color="#324057"
                text-color="#fff"
                active-text-color="#ffd04b">
                    <router-link to="/home">
                        <el-menu-item index="1">
                            <i class="fa fa-margin fa-server"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                    </router-link>  
                    
                    <router-link to="/infoshow" >
                    <el-menu-item index="infoshow">                            
                        <i class="fa fa-margin fa-server"></i>
                        <span slot="title">个人信息</span>                             
                    </el-menu-item>
                    </router-link> 
                    <router-link to="/setmate" >
                    <el-menu-item index="setmate">                            
                        <i class="fa fa-margin fa-server"></i>
                        <span slot="title">综测自评</span>                             
                    </el-menu-item>
                    </router-link>

                    <template v-if="user.role=='审核员'||user.role=='admin'">
                      <el-submenu 
                      v-for="item in items" 
                      :key="item.path" 
                      :index="item.path">
                          <template slot="title">
                              <i :class="'fa fa-margin '+item.icon"></i>
                              <span slot="title">{{item.name}}</span>
                          </template>
                          <router-link v-for="child in item.children" :key="child.path" :to="child.path">
                              <el-menu-item  :index="child.path" >
                                  <span slot="title">{{child.name}}</span>
                              </el-menu-item>
                          </router-link>
                      </el-submenu>
                    </template>

                    <router-link to="/admin" v-if="user.role=='admin'">
                    <el-menu-item index="admin">                            
                        <i class="fa fa-margin fa-server"></i>
                        <span slot="title">管理员</span>                             
                    </el-menu-item>
                    </router-link> 
                        
                     
                </el-menu>          
            </el-col>
        </el-row>
    <!-- </div> -->
</template>

<script>
export default {
  name: 'LeftMenu',
  data() {
    return {        
        items: [            
            {
              icon: "fa-money",
              name: "审核员",
              path: "fund",
              children: [
                { path: "check", name: "审核" },                
                { path: "analysis", name: "各模块分" },
                { path: "scoresum", name: "总分" },
                ]
            },                 
        ]
    }
  },
  computed: {
      user(){
        return this.$store.state.user
      }
    },
}
</script>

<style scoped>
/* .left-menu {
    display: inline-block;
} */
.menu_page {
  position: fixed;
  top: 71px;
  left: 0;
  min-height: 100%;
  background-color: #324057;
  z-index: 99;
}
.el-menu {
  border: none;
}
.fa-margin {
  margin-right: 5px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 400px;
}
.el-menu-vertical-demo {
  width: 35px;
}
.el-submenu .el-menu-item {
  min-width: 180px;
}

.hiddenDropdown,
.hiddenDropname {
  display: none;
}
a {
  text-decoration: none;
}
</style>